
function render() {
    //页码
    var pageInfo = document.querySelector(".numInfo");
    pageInfo.innerHTML = `共${students.length}条信息，共${Math.ceil(students.length / 10)}页，目前为${currentPage}页`;
    //创建学生条目
    for (var i = (currentPage - 1) * 10; i < students.length && i < (currentPage * 10); i++) {
        //创建每一行
        var oBodyTr = document.createElement("tr");
        oBodyTr.style.textAlign = "center";
        oBodyTr.style.height = "35px";
        //颜色
        if (i % 2 == 0) {
            oBodyTr.style.backgroundColor = "#7df1f5";
        } else {
            oBodyTr.style.backgroundColor = "#eef1f8";
        }
        //创建表格
        for (var j = 0; j < 10; j++) {
            oBodyTr.insertCell(j);
        }
    }
}
function shou() {
    $('.zhu').css('display', 'block')
    $('.xingxi').css('display', 'none')
    $('.geren').css('display', 'none')
    $('.tea').css('display', 'none')
    $('.bji').css('display', 'none')
    $('.tubiao').css('display', 'none')
}

function tu() {
    $('.zhu').css('display', 'none')
    $('.tubiao').css('display', 'block')
    $('.xingxi').css('display', 'none')
    $('.geren').css('display', 'none')
    $('.tea').css('display', 'none')
    $('.bji').css('display', 'none')
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['收入', '课程数量', '用户数量', '浏览量']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80],
                type: 'bar'
            }
        ]
    };

    option && myChart.setOption(option);

    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '收入' },
                    { value: 735, name: '课程数量 ' },
                    { value: 580, name: '用户数量' },
                    { value: 484, name: '浏览量' },
                ]
            }
        ]
    };

    option && myChart.setOption(option);

}

const apiUrl = "http://47.94.4.201/index.php/index/teacher/teacherlist";
var currentPage = 1;
const pageLimit = 10;

// 请求数据
async function fetchData(page) {
    if (page < 1) return;

    const response = await fetch(`${apiUrl}?page=${page}&pagelimit=${pageLimit}`);
    const result = await response.json();

    if (result.code === 0) {
        const dataList = result.data.data;
        const pageCount = result.data.pagecount;

        if (page > pageCount) return;

        currentPage = page;
        renderList(dataList);
        document.getElementById("current-page").innerText = currentPage;
        document.getElementById("total-pages").innerText = Math.ceil(pageCount / 8);
    }
}
fetchData(1); // 初始化加载第一页

function renderList(data) {
    const dataListDiv = document.getElementById("data-list");
    dataListDiv.innerHTML = data
        .map(item => `
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.nick}</td>
                <td>${item.birthdata}</td>
                <td>${item.sex}</td>
                <td>${item.iphone}</td>
                <td><button type="button" lay-on="page" onclick="look(${item.id})" id='look'>查看</button> 
                <button onclick="bji(${item.id})" id='look'>编辑</button> 
                <button class="del" onclick="del(${item.id})">删除</button></td>
            </tr>`)
        .join("");
}


function people() {
    document.querySelector('.xingxi').style.display = 'block'
    document.querySelector('.zhu').style.display = 'none'
}

function tiantea() {

    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/mycenter',
        data: {
            name: $('.xingxi input:eq(0)').val(),
            userid: 1,
            iphone: $('.xingxi input:eq(1)').val(),
            nick: $('.xingxi input:eq(2)').val(),
            birthdata: $('.xingxi input:eq(3)').val(),
            emails: $('.xingxi input:eq(4)').val(),
            indata: $('.xingxi input:eq(5)').val(),
        },
        success: (a) => {
            if (a.msg == '添加成功') {
                document.querySelector('.xingxi').style.display = 'none'
                document.querySelector('.zhu').style.display = 'block'
                alert('添加成功')
            } else {
                alert('添加失败')
            }
        },
        error: e => {
            console.log(e);
        }
    })
}

function center() {
    document.querySelector('.geren').style.display = 'block'
    document.querySelector('.zhu').style.display = 'none'
}

function ok() {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/index/getmycenter',
        data: {
            userid: 1
        },
        dataType: 'json',
        success: a => {
            console.log(a.data);
            a.data.forEach(item => {
                console.log(item);
            })
        },
        error: e => {
            console.log(e);
        }
    })
}

function kuang() {
    document.querySelector('.tea').style.display = 'block'
    document.querySelector('.zhu').style.display = 'none'
}

function add() {
    var sex
    var inps = document.querySelectorAll('.gend')
    inps.forEach(item => {
        if (item.checked) {
            sex = item.value
        }
    })

    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/addteacher',
        data: {
            name: document.querySelectorAll('.tea input')[0].value,
            nick: document.querySelectorAll('.tea input')[1].value,
            birthdata: document.querySelectorAll('.tea input')[2].value,
            iphone: document.querySelectorAll('.tea input')[3].value,
            sex: sex
        },
        success: (a) => {
            if (a.msg == '添加成功') {
                document.querySelector('.tea').style.display = 'none'
                document.querySelector('.zhu').style.display = 'block'
                fetchData(1)
            } else {
                alert('格式不正确')
            }
        },
        error: e => {
            console.log(e);
        }
    })
}

layui.use(function () {
    var layer = layui.layer;
    var util = layui.util;
    // 批量事件
    util.on('lay-on', {
        page: function () {
            // 页面层
            layer.open({
                type: 1,
                area: ['800px', '500px'], // 宽高
                content: '<table border="1px" style="border-spacing: 0px"><tbody><tr><td>姓名:</td><td>满仓156</td><td>职位:</td><td colspan="2">讲师</td><td rowspan="4"><img src="../图片/20200106171335_tUa5x.jpeg" style="width: 100px;height: 100px;"></td></tr><tr><td>昵称:</td><td>易安居士</td><td>出生日期:</td><td colspan="2">1970-01-01</td></tr><tr><td>性别:</td><td>女♀</td><td>入职日期:</td><td colspan="2">2100-12-14</td></tr><tr><td>手机号码:</td><td colspan="2"></td><td>邮箱:</td><td>liqingzhao@itcast.cn</td></tr><tr><td>籍贯:</td><td colspan="5">天津市 天津 和平区</td></tr><tr><td colspan="6"><textarea style="width: 690px;height: 100px;"></textarea></td></tr></tbody></table>'
            });
        }
    });
});

function look(id) {
    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/getteacherbyid',
        data: {
            id: id
        },
        success: (a) => {
            var b = $('.layui-layer-content table')
            b.html('')
            b.append(`
                <tbody class='clears' style=' font-weight: 800;font-size: 17px;'>
                    <tr>
                        <td>姓名:</td>
                        <td>${a.data.name}</td>
                        <td>职位:</td>
                        <td colspan="2">讲师</td> 
                        <td rowspan="4">
                        <img src="../图片/t0160182972d655a8f5.jpg" style="width: 100px;height: 128px;">
                        </td>
                    </tr>
                    <tr>
                        <td>昵称:</td>
                        <td>${a.data.nick}</td>
                        <td>出生日期:</td>
                        <td colspan="2">${a.data.birthdata}</td>
                    </tr>
                    <tr>
                        <td>性别:</td>
                        <td>${a.data.sex}</td>
                        <td>入职日期:</td>
                        <td colspan="2">2015-02-14</td>
                    </tr>
                    <tr>
                        <td>手机号码:</td>
                        <td colspan="2">${a.data.iphone}</td>
                        <td>邮箱:</td>
                        <td>liqingzhao@itcast.cn</td>
                    </tr>
                    <tr>
                        <td>籍贯:</td>
                        <td colspan="5">河北省 石家庄 长安区</td>
                    </tr>
                    <tr>
                        <td colspan="6"><textarea style="width: 690px;height: 100px;"></textarea></td>
                    </tr>
        </tbody>`)
        },
        error: e => {
            console.log(e);
        }
    })
}

function sou() {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/getsearch',
        data: {
            page: 1,
            pagelimit: 10,
            name: $('.content').val()
        },
        dataType: 'json',
        success: a => {
            var tbody = $('tbody')
            tbody.html('')
            a.data.data.forEach(item => {
                tbody.append(`
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.nick}</td>
                        <td>${item.birthdata}</td>
                        <td>${item.sex}</td>
                        <td>${item.iphone}</td>
                        <td><button type="button" class="layui-btn layui-btn-primary" lay-on="page" onclick="look(${item.id})" id='look'>查看</button> 
                        <button onclick="bji(${item.id})" id='look'>编辑</button> 
                        <button class="del" onclick="del(${item.id})">删除</button></td>
                    </tr>`)
            })
        },
        error: e => {
            console.log(e);
        }
    })
}

function del(id) {
    $.ajax({
        type: 'get',
        url: 'http://47.94.4.201/index.php/index/teacher/delteacher',
        data: {
            id: id
        },
        dataType: 'json',
        success: a => {
            fetchData(1)
        },
        error: e => {
            console.log(e);
        }
    })
}

var iid
function bji(id) {
    $('.bji').css('display', 'block')
    $('.zhu').css('display', 'none')
    iid = id
}

function gai() {
    var sex
    var inps = document.querySelectorAll('.xbie')
    inps.forEach(item => {
        if (item.checked) {
            sex = item.value
        }
    })

    $.ajax({
        type: 'post',
        url: 'http://47.94.4.201/index.php/index/index/upteacher',
        data: {
            id: iid,
            name: $('.bji input:eq(0)').val(),
            birthdata: $('.bji input:eq(1)').val(),
            sex: sex,
        },
        dataType: 'json',
        success: a => {
            fetchData(1)
            $('.bji').css('display', 'none')
            $('.zhu').css('display', 'block')
        },
        error: e => {
            console.log(e);
        }
    })
}
//上一页
function prevPage() {
    if (currentPage <= 1) {
        alert("当前是第一页");
    } else {
        currentPage--;
        render();
    }
}

//下一页
function nextPage() {
    if (currentPage >= Math.ceil(students.length / 10)) {
        alert("当前最后一页");
    } else {
        currentPage++;
        render();
    }
}